<template>
  <div class="app-container">
    <u-page title="小票记录">
      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="专柜名称" prop="dept_merch">
            <el-input v-model="listQuery.dept_merch" placeholder="请输入专柜名称" clearable style="width: 170px" />
          </el-form-item>
          <el-form-item label="订单类型" prop="orderType">
            <el-select v-model="listQuery.orderType" placeholder="请选择类型" class="disabled" clearable>
              <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="账单号" prop="sale_no">
            <el-input v-model="listQuery.sale_no" placeholder="请输入账单号" clearable style="width: 170px" />
          </el-form-item>
          <el-form-item label="会员卡号" prop="cardNo">
            <el-input v-model="listQuery.cardNo" placeholder="请输入会员卡号" clearable style="width: 170px" />
          </el-form-item>
          <el-form-item label="操作时间" prop="searchDate">
            <u-date-time-picker v-model="daterange" @change="changeDate" />
          </el-form-item>
          <el-form-item label="识别状态" prop="status">
            <el-select v-model="listQuery.status" placeholder="识别状态" clearable>
              <el-option label="全部" value="" />
              <el-option label="添加成功" value="1" />
              <el-option label="添加失败" value="0" />
              <el-option label="已移除" value="-1" />
            </el-select>
          </el-form-item>
          <el-form-item label="领取状态" prop="received">
            <el-select v-model="listQuery.received" placeholder="领取状态" clearable>
              <el-option label="全部" value="" />
              <el-option label="已领券" value="1" />
              <el-option label="未领券" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handelList">搜索</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>
      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="handelList"
        @selection-change="hdlSelectChange"
      />
    </u-page>

    <u-dialog title="文字识别" :show.sync="jsonDialogVisible" :footer="false" width="45%" class="code">
      <el-input v-model="detailJson" autosize type="textarea" disabled placeholder="{}" />
    </u-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      api: this.$u.api.PluginsParkcouponLog,
      daterange: [],
      orderShow: false,
      listQuery: {
        page: 1,
        pageSize: 10,
        totalCount: 1,
        beginTime: '',
        endTime: ''
      },
      typeList: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '0',
          label: '自收银'
        },
        {
          value: '1',
          label: 'A9'
        }, {
          value: '2',
          label: '二维火'
        }
      ],
      // 表格
      columns: [
        {
          prop: 'url',
          label: '上传小票',
          image: true
        },
        {
          prop: 'orderType',
          label: '订单类型',
          render: (h, params) => {
            if (params.row.orderType === 0) {
              return h('el-tag', { props: { type: 'success' }}, '自收银')
            } else if (params.row.orderType === 1) {
              return h('el-tag', 'A9')
            } else {
              return h('el-tag', { props: { type: 'warning' }}, '二维火')
            }
          }
        },
        {
          prop: 'dept_merch',
          label: '门店'
        },
        {
          prop: 'time_start',
          label: '开台时间'
        },
        {
          prop: 'sale_time',
          label: '结账时间'
        },
        {
          prop: 'paid_amount',
          label: '金额'
        },
        {
          prop: 'sale_no',
          label: '账单号'
        },
        {
          prop: 'people',
          label: '人数'
        },
        {
          prop: 'cardNo',
          label: '会员卡号'
        },
        {
          prop: 'status',
          label: '添加状态',
          render: (h, params) => {
            if (params.row.status === 1) {
              return h('el-tag', { props: { type: 'success' }}, '添加成功')
            } else if (params.row.status === -1) {
              return h('el-tag', { props: { type: 'warning' }}, '已移除')
            } else {
              return h('el-tag', { props: { type: 'danger' }}, '添加失败')
            }
          }
        },
        {
          prop: 'orderStatus',
          label: '订单状态',
          render: (h, params) => {
            if (params.row.status === 1) {
              if (params.row.orderStatus === 1) {
                return h('el-tag', { props: { type: 'success' }}, '有效')
              } else if (params.row.orderStatus === -1) {
                return h('el-tag', { props: { type: 'info' }}, '已退货')
              } else if (params.row.orderStatus === -2) {
                return h('el-tag', { props: { type: 'info' }}, '已积分')
              } else if (params.row.orderStatus === -3) {
                return h('el-tag', { props: { type: 'info' }}, '已领券')
              }
            } else {
              return null
            }
          }
        },
        {
          prop: 'content',
          label: '文字识别',
          render: (h, params) => {
            return h('el-button', { props: { type: 'text' }, on: {
              click: () => this.orderDetailToJson(params.row)
            }}, '识别信息')
          }
        },
        {
          prop: 'msg',
          label: '报错信息'
        },
        {
          prop: 'createdAt',
          label: '上传时间',
          timestamp: true
        },
        {
          prop: 'received',
          label: '领取状态',
          render: (h, params) => {
            if (params.row.received === 1) {
              return h('el-tag', { props: { type: 'success' }}, '已领券')
            } else {
              return h('el-tag', { props: { type: 'info' }}, '未领券')
            }
          }
        },
        {
          prop: 'updatedAt',
          label: '领券时间',
          formatter: (row) => {
            if (row.received === 0) {
              return ''
            } else {
              const date = new Date(row.updatedAt)
              const year = date.getFullYear()
              const month = String(date.getMonth() + 1).padStart(2, '0') // 补零
              const day = String(date.getDate()).padStart(2, '0')
              const hours = String(date.getHours()).padStart(2, '0')
              const minutes = String(date.getMinutes()).padStart(2, '0')
              const seconds = String(date.getSeconds()).padStart(2, '0')
              return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
            }
          }
        }
      ],
      listLoading: false,
      list: [],
      orderList: [],
      listOptions: {
        stripe: true
      },
      jsonDialogVisible: false,
      detailJson: {}
    }
  },
  created() {
    this.handelList()
  },
  methods: {
    changeDate(item) {
      if (item) {
        this.listQuery.beginTime = item[0]
        this.listQuery.endTime = item[1]
      } else {
        this.listQuery.beginTime = ''
        this.listQuery.endTime = ''
      }
    },
    dateFormat() {
      if (this.daterange) {
        this.listQuery.beginTime = this.daterange[0]
        this.listQuery.endTime = this.daterange[1]
      } else {
        this.daterange = []
        this.listQuery.beginTime = ''
        this.listQuery.endTime = ''
      }
    },
    handelList() {
      this.dateFormat()
      this.hdlList()
    },
    // 查看识别内容
    orderDetailToJson(row) {
      const { content } = row
      const content_ = content ? JSON.parse(content) : {}
      this.detailJson = JSON.stringify(content_, null, '\t')
      this.jsonDialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>

.app-container{
  ::v-deep {
    .filter {
      border: 0;
    }

    .code .el-textarea.is-disabled .el-textarea__inner {
      background-color: #060606 !important;
      color: #c6c6c6 !important;
    }

  }
}
</style>
